feat(hololive): filter

2 files changed, 87 insertions, 0 deletions

diff --git a/src/routes/hololive/[[stream]]/+page.server.ts b/src/routes/hololive/[[stream]]/+page.server.ts
new file mode 100644
index 00000000..87839c14
--- /dev/null
+++ b/src/routes/hololive/[[stream]]/+page.server.ts
@@ -0,0 +1,5 @@
+export const load = ({ params }) => {
+	return {
+		stream: params.stream
+	};
+};
diff --git a/src/routes/hololive/[[stream]]/+page.svelte b/src/routes/hololive/[[stream]]/+page.svelte
new file mode 100644
index 00000000..777f1e70
--- /dev/null
+++ b/src/routes/hololive/[[stream]]/+page.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Message from '$lib/Loading/Message.svelte';
+	import Skeleton from '$lib/Loading/Skeleton.svelte';
+	import HeadTitle from '$lib/Home/HeadTitle.svelte';
+	import { parseScheduleHtml } from '$lib/Data/hololive';
+	import proxy from '$lib/Utility/proxy';
+	import locale from '$stores/locale';
+	import root from '$lib/Utility/root';
+	import identity from '$stores/identity';
+	import Lives from '$lib/Hololive/Lives.svelte';
+	import { typeSchedule } from '$lib/Hololive/hololive';
+
+	export let data;
+
+	let schedulePromise: Promise<Response>;
+	let pinnedStreams: string[] = [];
+
+	onMount(() => getPinnedStreams());
+
+	const getPinnedStreams = () => {
+		let streams: string[] = [];
+
+		const setSchedule = () => {
+			pinnedStreams = streams;
+			schedulePromise = fetch(proxy('https://schedule.hololive.tv'), {
+				headers: {
+					Cookie: 'timezone=Asia/Tokyo'
+				}
+			});
+		};
+
+		if ($identity.id !== -2) {
+			fetch(root(`/api/preferences?id=${$identity.id}`)).then((response) => {
+				if (response.ok)
+					response.json().then((data) => {
+						if (data && data.pinned_hololive_streams) streams = data.pinned_hololive_streams;
+
+						setSchedule();
+					});
+			});
+
+			return;
+		}
+
+		setSchedule();
+	};
+</script>
+
+<HeadTitle route="hololive Schedule" path="/hololive" />
+
+{#await schedulePromise}
+	<Message message="Loading schedule ..." />
+
+	<Skeleton grid={true} count={100} width="49%" height="16.25em" />
+{:then scheduleResponse}
+	{#if scheduleResponse}
+		{#await scheduleResponse.text()}
+			<Message message="Parsing schedule ..." />
+
+			<Skeleton grid={true} count={100} width="49%" height="16.25em" />
+		{:then untypedSchedule}
+			{@const schedule = typeSchedule(parseScheduleHtml(untypedSchedule))}
+
+			<Lives {schedule} {pinnedStreams} {getPinnedStreams} filter={data.stream} />
+		{:catch}
+			<Message loader="ripple" slot>
+				{$locale().hololive.parseError}
+				<a href={'#'} on:click={() => location.reload()}>Try again?</a>
+			</Message>
+		{/await}
+	{:else}
+		<Message message="Loading schedule ..." />
+
+		<Skeleton grid={true} count={100} width="49%" height="16.25em" />
+	{/if}
+{:catch}
+	<Message loader="ripple" slot>
+		{$locale().hololive.loadError} Please
+		<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+	</Message>
+{/await}